<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="/static/layui/css/layui.css" rel="stylesheet">
    <script src="/static/layui/layui.js"></script>
    <title>信息修改</title>
    <style>
        .img {
            display: flex;
            align-items: center;
        }

        .uploadImg button {
            margin-left: 20px;
        }
    </style>
  <script>
    document.title = "信息修改 | {:config('system.base.title')} "
</script>>
</head>

<body>
    <div class="layui-container">
        <form action="" method="post" lay-filter="edit" enctype="multipart/form-data"
            class="layui-form layui-form-pane">
            <div class="layui-form-item">
                <label class="layui-form-label">头像上传</label>
                <div class="uploadImg">
                    <div class="layui-input-block">
                        <div style="width: 132px;">
                            <div class="layui-upload-list">
                                <img class="layui-upload-img" id="ID-upload-demo-img"
                                    style="width: 100%; height: 92px;">
                                <div id="ID-upload-demo-text"></div>
                            </div>
                            <div class="layui-progress layui-progress-big" lay-showPercent="yes"
                                lay-filter="filter-demo">
                                <div class="layui-progress-bar" lay-percent=""></div>
                            </div>
                        </div>
                    </div>
                    <button type="button" class="layui-btn" id="ID-upload-demo-btn">
                        <i class="layui-icon layui-icon-upload"></i> 上传
                    </button>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-block">
                    <input type="text" name="username" placeholder="用户名" class="layui-input" autocomplete="off"
                        readonly>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">昵称</label>
                <div class="layui-input-block">
                    <input type="text" name="nickname" placeholder="昵称" class="layui-input" autocomplete="off"
                        lay-verify="requuired">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">签名</label>
                <div class="layui-input-block">
                    <input type="text" name="signature" placeholder="签名" class="layui-input" autocomplete="off"
                        lay-verify="requuired">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">邮箱</label>
                <div class="layui-input-block">
                    <input type="text" name="email" placeholder="邮箱" class="layui-input" autocomplete="off"
                        lay-verify="requuired|email">
                </div>
            </div>
            <div class="layui-form-item layui-clear">
                <button lay-submit lay-filter="edit" class="layui-btn layui-bg-blue" style="float:right">修改</button>
            </div>
        </form>
    </div>
    <script>
        layui.use(function () {
            var layer = layui.layer;
            var $ = layui.$;
            var form = layui.form;
            var load = layer.load(0);
            var upload = layui.upload;
            var element = layui.element;
            $(function () {
                setTimeout(function () { layer.close(load) }, 1000);
                $.ajax({
                    url: '/index/account/info/uid/' + "{$Request.session.user.user_id}"
                    , dataType: 'json'
                    , success: (res) => {
                        res = res.data
                        form.val('edit', {
                            "username": res.username
                            , 'nickname': res.nickname
                            , 'email': res.email
                            , 'signature': res.signature
                        });
                        $('#ID-upload-demo-img').attr('src', res.head_icon);
                    }
                })
                let img_path = ''
                // 单图片上传
                var uploadInst = upload.render({
                    elem: '#ID-upload-demo-btn',
                    url: '/index/article/uploadImg',
                    field: 'img',
                    before: function (obj) {
                        // 预读本地文件示例，不支持ie8
                        obj.preview(function (index, file, result) {
                            $('#ID-upload-demo-img').attr('src', result); // 图片链接（base64）
                        });
                        element.progress('filter-demo', '0%'); // 进度条复位
                        layer.msg('上传中', { icon: 16, time: 0 });
                    }, done: function (res) {
                        // 若上传失败
                        if (res.errno == undefined) {
                            return layer.msg("上传失败：" + res.errno, { icon: 5 })
                        }
                        if (res.errno > 0) {
                            $('#ID-upload-demo-text').html(''); // 置空上传失败的状态
                            return layer.msg('上传失败');
                        }
                        img_path = res.data.url
                    },
                    error: function () {
                        // 演示失败状态，并实现重传
                        var demoText = $('#ID-upload-demo-text');
                        demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                        demoText.find('.demo-reload').on('click', function () {
                            uploadInst.upload();
                        });
                    },
                    // 进度条
                    progress: function (n, elem, e) {
                        element.progress('filter-demo', n + '%'); // 可配合 layui 进度条元素使用
                        if (n == 100) {
                            layer.msg('上传完毕', { icon: 1 });
                        }
                    }
                })

                form.on('submit(edit)', function (data) {
                    var field = data.field;
                    field['head_icon'] = img_path
                    $.ajax({
                        url: '/index/account/edit',
                        type: 'post',
                        data: field
                        , success: function (e) {
                            e = JSON.parse(e)
                            if (e.code == 200) {
                                layer.msg('修改成功', { icon: 6, time: 1800 });
                            }
                            else {
                                layer.msg('修改失败：' + e, { icon: 6, time: 1800 })
                            }
                        }
                    })
                    return false;
                })
            })

        })
    </script>
</body>

</html>